<template>
    <div class="materialsList">
        <div class="m_carousel">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- 点 -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"
                        @click="openCarousel1()"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1" @click="openCarousel2()"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2" @click="openCarousel3()"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3" @click="openCarousel4()"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="4" @click="openCarousel5()"></li>
                </ol>

                <!-- 图 -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active" @click="openCarousel1()">
                        <!--<a href="javascript:;" class="mobile_img hidden-lg hidden-md hidden-sm">
                            <img src="" alt="...">
                            <div class="carousel-caption">
                                <span>MOBILE轮播图说明1</span>
                            </div>
                        </a>
                        <a href="javascript:;" class="pc_img" style="background-image: url('s')">
                            <div class="carousel-caption">
                                <span>PC轮播图说明1</span>
                            </div>
                        </a>-->
                    </div>
                    <div class="item" @click="openCarousel2()">

                    </div>
                    <div class="item" @click="openCarousel3()">

                    </div>
                    <div class="item" @click="openCarousel4()">

                    </div>
                    <div class="item" @click="openCarousel5()">

                    </div>
                </div>

                <!-- 左右 -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <div class="m_new">
            <div class="container">
                <div class="nav_parent"><!--移动端滚动-->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="tab-tag"><a href="javascript:;" role="tab"
                                                                   data-toggle="tab"><span
                                class="el-icon-video-camera-solid"></span>{{MATERIAL_RECOMMEND.NEW_MATERIAL.value}}</a>
                        </li>
                        <li role="presentation" class="active"><a href="#new-propaganda" aria-controls="new-propaganda"
                                                                  @click="getNewMaterial(MATERIAL_VIDEO_TYPE.YM_PROPAGATION.key)"
                                                                  role="tab" data-toggle="tab">{{MATERIAL_VIDEO_TYPE.YM_PROPAGATION.value}}</a>
                        </li>
                        <li role="presentation"><a href="#new-propaganda" aria-controls="new-propaganda" role="tab"
                                                   data-toggle="tab"
                                                   @click="getNewMaterial(MATERIAL_VIDEO_TYPE.HJ_PROPAGATION.key)">{{MATERIAL_VIDEO_TYPE.HJ_PROPAGATION.value}}</a>
                        </li>
                        <li role="presentation"><a href="#new-propaganda" aria-controls="new-propaganda" role="tab"
                                                   @click="getNewMaterial(MATERIAL_VIDEO_TYPE.USE_TUTORIAL.key)"
                                                   data-toggle="tab">{{MATERIAL_VIDEO_TYPE.USE_TUTORIAL.value}}</a>
                        </li>
                        <li role="presentation"><a href="#new-propaganda" aria-controls="new-propaganda" role="tab"
                                                   @click="getNewMaterial(MATERIAL_VIDEO_TYPE.COLLEGE_PPT.key)"
                                                   data-toggle="tab">{{MATERIAL_VIDEO_TYPE.COLLEGE_PPT.value}}</a>
                        </li>
                        <li role="presentation"><a href="#new-propaganda" aria-controls="new-propaganda" role="tab"
                                                   @click="getNewMaterial(MATERIAL_VIDEO_TYPE.MG_ANIMATION.key)"
                                                   data-toggle="tab">{{MATERIAL_VIDEO_TYPE.MG_ANIMATION.value}}</a></li>
                    </ul>
                </div>


                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="new-propaganda">
                        <el-row>
                            <el-col class="pane-col" :lg="6" :md="8" :sm="8" :xs="12"
                                    v-for="(item,index) in materialNewList"
                                    :key="index">
                                <el-card v-if="item.videoType!==MATERIAL_VIDEO_TYPE.COLLEGE_PPT.key" class="pane-box" :body-style="{ padding: '0px' }" shadow="hover">
                                    <div class="videoImg">
                                        <img :src="item.videoCover" class="pane-img img-responsive">
                                    </div>

                                    <div style="padding: 14px;">
                                        <span class="title">{{item.name}}</span>
                                        <div class="bottom clearfix">
                                            <time class="desc">
                                                {{item.seoDescription}}
                                            </time>
                                            <el-button class="showVideo downButton" type="primary" @click="openVideo(item)"><span
                                                    class="glyphicon glyphicon-fullscreen"></span>预览
                                            </el-button>
                                            <el-button class="downVideo downButton" type="primary" @click="downVideo(item.uniId,item.video)"><span
                                                    class="glyphicon glyphicon-save" ></span>下载
                                            </el-button>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card v-if="item.videoType===MATERIAL_VIDEO_TYPE.COLLEGE_PPT.key" class="pane-box" :body-style="{ padding: '0px' }" shadow="hover">
                                    <div class="videoImg">
                                        <img :src="item.videoCover" class="pane-img img-responsive">
                                    </div>

                                    <div style="padding: 14px;">
                                        <span class="title">{{item.pptTitle}}</span>
                                        <div class="bottom clearfix">
                                            <time class="desc">
                                                {{item.pptDesc}}
                                            </time>
                                            <!--<el-button class="showVideo" type="primary" @click="openVideo(item)"><span
                                                    class="glyphicon glyphicon-fullscreen"></span>预览
                                            </el-button>-->
                                            <el-button class="downPPT downButton" type="primary" @click="downVideo(item.uniId,item.pptFile)"><span
                                                    class="glyphicon glyphicon-save" ></span>下载
                                            </el-button>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="m_hort">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="tab-tag">
                        <a href="javascript:;" class="leftMoreA" role="tab" data-toggle="tab">
                            <span class="leftMoreS glyphicon glyphicon-fire"></span>{{MATERIAL_RECOMMEND.HOT_VIDEO.value}}
                        </a>

                    </li>
                    <li role="presentation" class="tab-tag">
                        <a href="javascript:;" class="rightMoreA" role="tab" data-toggle="tab">
                            <span class="rightMoreS glyphicon glyphicon-forward"></span>
                        </a>
                    </li>

                </ul>
                <div class="tab-pane">
                    <el-row>
                        <el-col class="pane-col" :lg="6" :md="8" :sm="8" :xs="12"
                                v-for="(item,index) in materialHotList"
                                :key="index">
                            <el-card class="pane-box" :body-style="{ padding: '0px' }" shadow="hover">
                                <div class="videoImg">
                                    <img :src="item.videoCover" class="pane-img img-responsive">
                                </div>

                                <div style="padding: 14px;">
                                    <span class="title">{{item.name}}</span>
                                    <div class="bottom clearfix">
                                        <time class="desc">
                                            {{item.seoDescription}}
                                        </time>
                                        <el-button class="showVideo downButton" type="primary" @click="openVideo(item)"><span
                                                class="glyphicon glyphicon-fullscreen"></span>预览
                                        </el-button>
                                        <el-button class="downVideo downButton" type="primary" @click="downVideo(item.uniId,item.video)"><span
                                                class="glyphicon glyphicon-save"></span>下载
                                        </el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>


            </div>
            <div class="m_type">
                <div class="nav_parent">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="tab-tag"><a href="javascript:;" role="tab"
                                                                   data-toggle="tab"><span
                                class="glyphicon glyphicon-facetime-video"></span>{{MATERIAL_TYPE.VIDEO_TYPE.value}}</a>
                        </li>
                        <li role="presentation" class="active"
                            @click="getMaterialVideo(MATERIAL_VIDEO_TYPE.YM_PROPAGATION.key)"><a href="#type-yameng"
                                                                                                 aria-controls="type-yameng"
                                                                                                 role="tab"
                                                                                                 data-toggle="tab">{{MATERIAL_VIDEO_TYPE.YM_PROPAGATION.value}}</a>
                        </li>
                        <li role="presentation" @click="getMaterialVideo(MATERIAL_VIDEO_TYPE.HJ_PROPAGATION.key)"><a
                                href="#type-yameng" aria-controls="type-yameng" role="tab"
                                data-toggle="tab">{{MATERIAL_VIDEO_TYPE.HJ_PROPAGATION.value}}</a>
                        </li>
                        <li role="presentation" @click="getMaterialVideo(MATERIAL_VIDEO_TYPE.USE_TUTORIAL.key)"><a
                                href="#type-yameng" aria-controls="type-yameng" role="tab"
                                data-toggle="tab">{{MATERIAL_VIDEO_TYPE.USE_TUTORIAL.value}}</a>
                        </li>
                        <li role="presentation" @click="getMaterialVideo(MATERIAL_VIDEO_TYPE.MG_ANIMATION.key)"><a
                                href="#type-yameng" aria-controls="type-yameng" role="tab"
                                data-toggle="tab">{{MATERIAL_VIDEO_TYPE.MG_ANIMATION.value}}</a>
                        </li>
                        <li role="presentation" @click="getMaterialVideo(MATERIAL_VIDEO_TYPE.HY_WINE.key)"><a
                                href="#type-yameng" aria-controls="type-yameng" role="tab"
                                data-toggle="tab">{{MATERIAL_VIDEO_TYPE.HY_WINE.value}}</a></li>
                        <li role="presentation" @click="getMaterialVideo(MATERIAL_VIDEO_TYPE.PUBLIC_BENEFIT.key)"><a
                                href="#type-yameng" aria-controls="type-yameng" role="tab"
                                data-toggle="tab">{{MATERIAL_VIDEO_TYPE.PUBLIC_BENEFIT.value}}</a>
                        </li>
                    </ul>
                </div>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="type-yameng">
                        <el-row>
                            <el-col class="pane-col" :lg="6" :md="8" :sm="8" :xs="12"
                                    v-for="(item,index) in materialVideoList"
                                    :key="index">
                                <el-card class="pane-box" :body-style="{ padding: '0px' }" shadow="hover">
                                    <div class="videoImg">
                                        <img :src="item.videoCover" class="pane-img img-responsive">
                                    </div>

                                    <div style="padding: 14px;">
                                        <span class="title">{{item.name}}</span>
                                        <div class="bottom clearfix">
                                            <time class="desc">
                                                {{item.seoDescription}}
                                            </time>
                                            <el-button class="showVideo downButton" type="primary" @click="openVideo(item)"><span
                                                    class="glyphicon glyphicon-fullscreen"></span>预览
                                            </el-button>
                                            <el-button class="downVideo downButton" type="primary" @click="downVideo(item.uniId,item.video)"><span
                                                    class="glyphicon glyphicon-save"></span>下载
                                            </el-button>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
        <div class="m_plane">
            <div class="planeBG">
                <div class="container">
                    <div class="nav_parent">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="tab-tag"><a href="javascript:;" role="tab"
                                                                       data-toggle="tab"><span
                                    class="glyphicon glyphicon-picture"></span>{{MATERIAL_TYPE.PLANE_MATERIAL.value}}</a>
                            </li>
                            <li role="presentation" class="active"
                                @click="getMaterialPlane(MATERIAL_PLANE_TYPE.PLANE_LOGO.key)"><a href="#plane-logo"
                                                                                                 aria-controls="plane-logo"
                                                                                                 role="tab"
                                                                                                 data-toggle="tab">{{MATERIAL_PLANE_TYPE.PLANE_LOGO.value}}</a>
                            </li>
                            <li role="presentation"
                                @click="getMaterialPlane(MATERIAL_PLANE_TYPE.PLANE_PROPAGATION.key)"><a
                                    href="#plane-logo" aria-controls="plane-logo"
                                    role="tab"
                                    data-toggle="tab">{{MATERIAL_PLANE_TYPE.PLANE_PROPAGATION.value}}</a>
                            </li>
                            <li role="presentation"
                                @click="getMaterialPlane(MATERIAL_PLANE_TYPE.PLANE_PROPAGATION_PIC.key)"><a
                                    href="#plane-logo" aria-controls="plane-logo" role="tab"
                                    data-toggle="tab">{{MATERIAL_PLANE_TYPE.PLANE_PROPAGATION_PIC.value}}</a>
                            </li>
                            <li role="presentation" @click="getMaterialPlane(MATERIAL_PLANE_TYPE.PLANE_ACTIVE.key)"><a
                                    href="#plane-logo" aria-controls="plane-logo" role="tab"
                                    data-toggle="tab">{{MATERIAL_PLANE_TYPE.PLANE_ACTIVE.value}}</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>

            <!-- Tab panes -->
            <div class="planeBGC">
                <div class="container">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="plane-logo">
                            <el-row>
                                <el-col class="pane-col" :lg="6" :md="8" :sm="8" :xs="12"
                                        v-for="(item,index) in materialPlaneList"
                                        :key="index">
                                    <el-card class="pane-box" :body-style="{ padding: '0px' }" shadow="hover">
                                        <div class="videoImg">
                                            <img :src="item.designCover" class="pane-img img-responsive">
                                        </div>

                                        <div style="padding: 14px;">
                                            <span class="title">{{item.designTitle}}</span>
                                            <div class="bottom clearfix">
                                                <el-button class="downPlane downButton" type="primary"
                                                           @click="downVideo(item.uniId,item.designFile)"><span
                                                        class="glyphicon glyphicon-save-file"></span>下载
                                                </el-button>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <div class="m_pics">
            <div class="pics_BG">
                <div class="container">
                    <div class="nav_parent">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="tab-tag"><a href="javascript:;" role="tab"
                                                                       data-toggle="tab"><span
                                    class="glyphicon glyphicon-floppy-disk"></span>{{MATERIAL_TYPE.COM_EVENT.value}}</a>
                            </li>
                            <li role="presentation" class="eventYear active"
                                @click="getEventPlane(MATERIAL_EVENT_TYPE.EVENT_2019.key,'2019-'+e19[0].date[0])"><a
                                    href="#pics-2019"
                                    aria-controls="pics-2019"
                                    role="tab" data-toggle="tab">{{MATERIAL_EVENT_TYPE.EVENT_2019.value}}</a></li>
                            <li role="presentation" class="eventYear"
                                @click="getEventPlane(MATERIAL_EVENT_TYPE.EVENT_2020.key,'2020-'+e20[0].date[0])"><a
                                    href="#pics-2019" aria-controls="pics-2019" role="tab"
                                    data-toggle="tab">{{MATERIAL_EVENT_TYPE.EVENT_2020.value}}</a>
                            </li>
                            <li role="presentation" class="eventYear"
                                @click="getEventPlane(MATERIAL_EVENT_TYPE.EVENT_2021.key,'2021-'+e21[0].date[0])"><a
                                    href="#pics-2019" aria-controls="pics-2019" role="tab"
                                    data-toggle="tab">{{MATERIAL_EVENT_TYPE.EVENT_2021.value}}</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>

            <!-- Tab panes -->
            <div class="container">
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="pics-2019">
                        <div class="row">
                            <div class="pics_list">
                                <el-row class="">
                                    <el-col class="leftContent content_parent" :lg="3" :md="3" :sm="3" :xs="8">
                                        <el-menu class="el-menu-vertical-demo menuUL" default-active="0-2"
                                                 @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                                                <div v-for="(item,index) in eventDates" :key="index">
                                                <el-submenu index="0" >
                                                    <template slot="title" index="0-1" >
                                                        <i class="el-icon-location"></i>
                                                        <span slot="title" >{{item.month}}</span>
                                                    </template>
                                                    <el-menu-item-group >
                                                        <div v-for="da in item.date" :key="da.index" >
                                                            <el-menu-item index="0-2" @click.native="inEvent(da)">{{da}}</el-menu-item>
                                                        </div>
                                                    </el-menu-item-group>
                                                </el-submenu>
                                            </div>
                                        </el-menu>
                                    </el-col>
                                    <el-col class="leftScroll">
                                        <div class="leftScrollBar">
                                        </div>
                                    </el-col>
                                    <el-col class="rightContent" :lg="20" :md="20" :sm="20" :xs="15">
                                        <div class="eventDesc">
                                            <span>{{eventsName}}</span>
                                        </div>
                                        <div class="demo-image__preview contentDiv" v-for="(item,index) in eventPics"
                                             :key="index">
                                            <el-image
                                                    :src="item"
                                                    :preview-src-list="eventPics">
                                            </el-image>
                                        </div>

                                    </el-col>
                                </el-row>
                                <!--<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                                    <el-radio-button :label="false">展开</el-radio-button>
                                    <el-radio-button :label="true">收起</el-radio-button>
                                </el-radio-group>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <dialog-player ref="ossDialogPlayer"></dialog-player>
    </div>
</template>

<script>
    import DialogPlayer from "../../components/DialogPlayer";

    export default {
        name: "MaterialsList",
        components: {DialogPlayer},
        data() {
            return {
                message: "素材中心列表",
                carouselBig: ['/base/imgs/materials/materials_01_2000x410.jpg', '/base/imgs/materials/materials_02_2000x410.jpg', '/base/imgs/materials/materials_01_2000x410.jpg', '/base/imgs/materials/materials_02_2000x410.jpg', '/base/imgs/materials/materials_01_2000x410.jpg'],
                carouselSmall: ['/base/imgs/materials/materials_02_640x340.jpg', '/base/imgs/materials/materials_01_640x340.jpg', '/base/imgs/materials/materials_02_640x340.jpg', '/base/imgs/materials/materials_01_640x340.jpg', '/base/imgs/materials/materials_02_640x340.jpg'],
                carouselMaterials: [],
                videoList: ['/base/imgs/materials/video-bg-1.jpg', '/base/imgs/materials/video-bg-2.jpg', '/base/imgs/materials/video-bg-3.jpg', '/base/imgs/materials/video-bg-4.jpg', '/base/imgs/materials/video-bg-5.jpg', '/base/imgs/materials/video-bg-6.jpg', '/base/imgs/materials/video-bg-7.jpg', '/base/imgs/materials/video-bg-8.jpg'],
                hotList: ['/base/imgs/materials/video-bg-5.jpg', '/base/imgs/materials/video-bg-6.jpg', '/base/imgs/materials/video-bg-7.jpg', '/base/imgs/materials/video-bg-8.jpg'],
                pptList: ['/base/imgs/materials/video-bg-9.jpg', '/base/imgs/materials/video-bg-10.jpg'],
                icon: '/base/imgs/materials/video-bg-9.jpg',
                isCollapse: false,
                indexList: [
                    {
                        month: "1月",
                        date: ["1月2日", "1月14日"]
                    },
                ],
                opens: 1,
                materialVideoList: [],
                materialPlaneList: [],
                materialEventList: [],
                eventPics:[],
                eventsName:"",
                materialHotList: [],
                materialNewList: [],
                MATERIAL_TYPE: MATERIAL_TYPE,
                MATERIAL_RECOMMEND: MATERIAL_RECOMMEND,
                MATERIAL_VIDEO_TYPE: MATERIAL_VIDEO_TYPE,
                MATERIAL_PLANE_TYPE: MATERIAL_PLANE_TYPE,
                MATERIAL_EVENT_TYPE: MATERIAL_EVENT_TYPE,
                eventDate: [],//总日期数据
                e19: [],
                e20: [],
                e21: [],
                eventDates:[], //年度日期列表
            }
        },
        mounted() {
            //获取大事件日期
            this.getEventDate();
            //1.获取轮播素材
            this.getCarouselMaterial();
            //2.获取最新素材
            this.getNewMaterial("YP");
            //3.获取热门素材
            this.getHotMaterial();
            //4.获取视频素材
            this.getMaterialVideo("YP");
            //5.获取平面素材
            this.getMaterialPlane("PL");

        },
        methods: {
            getWidth() {
                let wid = $(window).width();
                let pcImg = document.querySelectorAll(".m_carousel #carousel-example-generic .carousel-inner .item");
                let videoBtn = document.getElementsByClassName("downButton");
                if(wid<768){
                    for (let i = 0; i < videoBtn.length; i++) {
                        videoBtn[i].style.fontSize = "10px";
                        videoBtn[i].style.padding = "5px 7px";
                    }
                }
                let leftScroll = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list .leftScroll")[0];
                let picsContent = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list .rightContent")[0];
                let picsDiv = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list .rightContent .contentDiv");
                let pics = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list .rightContent .contentDiv .el-image");
                let pc = [];
                let mobile = [];
                for (let i = 0; i < this.carouselMaterials.length; i++) {
                    pc.push(this.carouselMaterials[i].picCover);
                    mobile.push(this.carouselMaterials[i].miniPicList[0]);
                    //this.carouselBig=pcCarousel;
                }
                //pc = this.carouselBig;
                //mobile = this.carouselSmall;

                $(window).on("resize", function () {
                    let wid = $(window).width();
                    if (wid >= 768) {
                        //添加元素
                        $(pcImg).each(function (index, value) {
                            let item = $(this);
                            /*jquery添加元素，赋值属性*/
                            item.html($('<a href="javascript:;" class="pc_img" </a>')
                                .css("backgroundImage", "url('" + pc[index] + "')")
                                .css("display", "block")
                                .css("width", "100%")
                                .css("height", "410px")
                                .css("background-position", "center")
                                .css("background-size", "cover")
                            );
                        })

                    } else if (wid < 768) {
                        //平板-手机端
                        $(pcImg).each(function (index, value) {
                            let item = $(this);
                            item.html('<a href="javascript:;" class="mobile_img hidden-lg hidden-md hidden-sm">\n' +
                                '                            <img src="' + mobile[index] + '" alt="...">\n' +
                                '                        </a>')
                        });
                        for (let i = 0; i < videoBtn.length; i++) {
                            videoBtn[i].style.fontSize = "10px";
                            videoBtn[i].style.padding = "5px 7px";
                        }
                        /*移动端：滚动分类导航栏*/
                        /*移动端导航条滚动*/
                        let newNavTabs = $(".m_new .nav-tabs");
                        let catNavTabs = $(".m_type .nav-tabs");
                        let planeNavTabs = $(".m_plane .nav-tabs");
                        let picsNavTabs = $(".m_pics .nav-tabs");

                        let newLis = newNavTabs.find("li");
                        let carLis = catNavTabs.find("li");
                        let planeLis = planeNavTabs.find("li");
                        let picsLis = picsNavTabs.find("li");
                        let newTotalWidth = 0;//导航条总宽度
                        let carTotalWidth = 0;
                        let planeTotalWidth = 0;
                        let picsTotalWidth = 0;
                        newLis.each(function (index, value) {
                            /** 获取lis宽度
                             * width: 88元素本身宽度，不包含padding和间距
                             * innerWidth：88元素本身宽度+padding值
                             * outerWidth：88元素本身宽度+padding值+border值
                             * outerWidth(true)：参数=true，88元素本身宽度+padding值+border值+margin值
                             */
                            newTotalWidth = newTotalWidth + $(value).innerWidth();
                        })
                        //配置ul宽度
                        newNavTabs.width(newTotalWidth);
                        //添加移动端滚动父级nav（nav_parent）
                        let newScroll = new IScroll('.m_new .nav_parent', {
                            scrollX: true, scrollY: false
                        })

                        carLis.each(function (index, value) {
                            carTotalWidth = carTotalWidth + $(value).innerWidth();
                        })
                        catNavTabs.width(carTotalWidth);
                        let carScroll = new IScroll('.m_type .nav_parent', {
                            scrollX: true, scrollY: false
                        })
                        planeLis.each(function (index, value) {
                            planeTotalWidth = planeTotalWidth + $(value).innerWidth();
                        })
                        planeNavTabs.width(planeTotalWidth);
                        let planeScroll = new IScroll('.m_plane .nav_parent', {
                            scrollX: true, scrollY: false
                        })
                        picsLis.each(function (index, value) {
                            picsTotalWidth = picsTotalWidth + $(value).innerWidth();
                        })
                        picsNavTabs.width(picsTotalWidth);
                        let picScroll = new IScroll('.m_pics .nav_parent', {
                            scrollX: true, scrollY: false
                        })
                        //左侧图片导航
                        let contentScroll = new IScroll(".m_pics .content_parent", {
                            scrollX: false, scrollY: true
                        });
                        leftScroll.style.left = "30%";
                        //右侧图片内容
                        picsContent.style.left = "10px";
                        for (let i = 0; i < picsDiv; i++) {
                            picsDiv[i].style.marginRight = "3px";
                            picsDiv[i].style.marginBottom = "3px";
                            picsDiv[i].style.left = "5px";
                        }
                        for (let j = 0; j < pics.length; j++) {
                            pics[j].style.width = "100px";
                        }
                    }
                }).trigger("resize");
                //移动端轮播滑动
                let start, end;
                let carousel = $(".carousel-inner")[0];
                //获取当前图，data-ride="carousel"
                let carouselCurrent = $(".carousel");
                carousel.addEventListener("touchstart", function (e) {
                    start = e.targetTouches[0].clientX;
                });
                carousel.addEventListener("touchend", function (e) {
                    end = e.changedTouches[0].clientX;
                    if (end - start > 0) {
                        carouselCurrent.carousel('prev');
                    } else if (end - start < 0) {
                        carouselCurrent.carousel('next');
                    }
                })

            },
            /*滚轮事件
                * 1.clientX/clientY：鼠标在视口（可视区域）中的位置（没有兼容性问题）
                * 2.pageX/pageY：鼠标在页面中的位置。pageY=clientY+页面滚动出去的距离getScroll().scrollLeft
                * //1.滚动条滚动的位置
                * */
            getScroll() {
                let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
                let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                //返回滚动结果
                return {
                    scrollLeft: scrollLeft,
                    scrollTop: scrollTop
                }
            },
            //2.鼠标在页面视口的位置
            getPageScroll(e) {
                let pageX = e.pageX || e.clientX + getScroll().scrollLeft;
                let pageY = e.pageY || e.clientY + getScroll().scrollTop;
                return {
                    pageX: pageX,
                    pageY: pageY
                }
            },
            /*滚动条函数
            * 1.滚动条高度和内容高度有关：内容越高，滚动条越短
            * 2.功能：
            * (1)滚动条：可拖拽
            * (2)拖拽时，改变内容位置，获取滚动条位置
            * (3)滚动条高度：根据内容的top高度
            * */

            getScrollBar: function () {
                let picsList = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list")[0];//整个内容列表/max-height
                let leftContent = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list .leftContent")[0];//内容元素=内容ul
                let leftContentUL = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list .leftContent .menuUL")[0];//内容ul
                let leftScroll = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list .leftScroll")[0];//滚动容器
                let leftScrollBar = document.querySelectorAll(".m_pics .tab-content .tab-pane .pics_list .leftScroll .leftScrollBar")[0];//滚动条
                //1.根据内容大小，计算滚动条高度:滚动条高度/滚动容器的高度=内容可视高度（最大高度）/内容UL高度（（正比）
                //即：leftScrollBar/leftScroll=pics_list/menuUL
                function getScroll() {
                    let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
                    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                    //返回滚动结果
                    return {
                        scrollLeft: scrollLeft,
                        scrollTop: scrollTop
                    }
                }

                function getPageScroll(e) {
                    let pageX = e.pageX || e.clientX + getScroll().scrollLeft;
                    let pageY = e.pageY || e.clientY + getScroll().scrollTop;
                    return {
                        pageX: pageX,
                        pageY: pageY
                    }
                }

                /**
                 * offsetHeight：内容+padding+border
                 * clientHeight：内容+padding
                 * scrollHeight：内容+padding+滚动条高度（scrollTop）
                 * offsetTop/Left：距离当前元素 与 最近定位(absolute)的父元素的距离
                 * 鼠标按下：在box中的位置=e.pageY(用户视口坐标)-【bar.offsetTop(滚动条head到父元素absolute初始0的位置)+pics_list.offsetTop(pics_list到视口初始0的位置)】
                 * 鼠标拖动scroll：鼠标移动后的位置 同上
                 */
                    //滚动条高度=视口高度/加入滚动条高度的内容高度*滚动容器高度
                let barHeight = 200;
                //*内容高度UL>最大高度picList时，计算滚动条，否则没有滚动条height=0
                if (leftContent.scrollHeight > picsList.clientHeight) {
                    barHeight = picsList.clientHeight / leftContent.scrollHeight * leftScroll.scrollHeight;
                    leftScroll.style.display = "block";
                } /*else {
                    leftScroll.style.display = "none";
                }*/
                //1.设置滚动条高度
                leftScrollBar.style.height = barHeight + "px";

                leftScrollBar.onmousedown = function (e) {
                    e = e || window.event;
                    //2.鼠标按下，鼠标在滚动条中的位置
                    let downY = getPageScroll(e).pageY - leftScrollBar.offsetTop - picsList.offsetTop;
                    //3.鼠标拖动，求滚动条的位置
                    document.onmousemove = function (e) {
                        let barY = getPageScroll(e).pageY - downY - picsList.offsetTop;
                        //判断bar的top值，不能超出父容器
                        barY = barY < 0 ? 0 : barY;
                        barY = barY > leftScroll.clientHeight - leftScrollBar.clientHeight
                            ? leftScroll.clientHeight - leftScrollBar.clientHeight : barY;
                        leftScrollBar.style.top = barY + "px";
                        //4.滚动条滚动，移动内容top: 内容滚动的距离/内容最大能滚动距离=滚动条滚动的距离 barY /滚动条最大能滚动的距离
                        let contentScrollMax = leftContent.scrollHeight - picsList.clientHeight;
                        let scrollBarMax = leftScroll.clientHeight - leftScrollBar.clientHeight;
                        let contentY = barY / scrollBarMax * contentScrollMax;
                        //滚动条下移，内容上走。注意必须定位到UL
                        leftContentUL.style.top = -contentY + "px";
                    }
                }
                //5.鼠标抬起，移除鼠标事件
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                }
                //6.移动端滚轮touch
                leftScrollBar.addEventListener("touchstart", function (e) {
                    e = e || window.event;
                    let touchY = getPageScroll(e).pageY - leftScrollBar.offsetTop - picsList.offsetTop;
                    leftScrollBar.addEventListener("touchend", function (e) {
                        let touchBarY = getPageScroll(e).pageY - touchY - picsList.offsetTop;
                        touchBarY = touchBarY < 0 ? 0 : touchBarY;
                        touchBarY = touchBarY > leftScroll.clientHeight - leftScrollBar.clientHeight
                            ? leftScroll.clientHeight - leftScrollBar.clientHeight : touchBarY;
                        leftScrollBar.style.top = touchBarY + "px";
                        let touchScrollMax = leftContent.scrollHeight - picsList.clientHeight;
                        let touchBarMax = leftScroll.clientHeight - leftScrollBar.clientHeight;
                        let touchContent = touchBarY / touchBarMax * touchScrollMax;
                        leftContentUL.style.top = -touchContent + "px";

                    })
                })
            },
            handleOpen(key, keyPath) {
                console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
            },
            handleClose(key, keyPath) {
                console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
            },
            //1.获取轮播素材
            getCarouselMaterial() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/material/carousel').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.carouselMaterials = resp.responseData;
                        this.getWidth();
                    }
                });
            },
            openCarousel1() {
                this.$nextTick(() => {
                    let url = this.carouselMaterials[0].video;
                    let title = this.carouselMaterials[0].name;
                    let coverPic = this.carouselMaterials[0].videoCover;
                    this.$refs.ossDialogPlayer.playerURL(url, title, coverPic);
                })
            },
            openCarousel2() {
                this.$nextTick(() => {
                    let url = this.carouselMaterials[1].video;
                    let title = this.carouselMaterials[1].name;
                    let coverPic = this.carouselMaterials[1].videoCover;
                    this.$refs.ossDialogPlayer.playerURL(url, title, coverPic);
                })
            },
            openCarousel3() {
                this.$nextTick(() => {
                    let url = this.carouselMaterials[2].video;
                    let title = this.carouselMaterials[2].name;
                    let coverPic = this.carouselMaterials[2].videoCover;
                    this.$refs.ossDialogPlayer.playerURL(url, title, coverPic);
                })
            },
            openCarousel4() {
                this.$nextTick(() => {
                    let url = this.carouselMaterials[3].video;
                    let title = this.carouselMaterials[3].name;
                    let coverPic = this.carouselMaterials[3].videoCover;
                    this.$refs.ossDialogPlayer.playerURL(url, title, coverPic);
                })
            },
            openCarousel5() {
                this.$nextTick(() => {
                    let url = this.carouselMaterials[4].video;
                    let title = this.carouselMaterials[4].name;
                    let coverPic = this.carouselMaterials[4].videoCover;
                    this.$refs.ossDialogPlayer.playerURL(url, title, coverPic);
                })
            },
            //2.获取视频分类列表
            getMaterialVideo(item) {
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/module/material/video/' + item).then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.materialVideoList = resp.responseData;
                    }
                });
            },
            //3.获取平面分类列表
            getMaterialPlane(item) {
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/module/material/plane/' + item).then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.materialPlaneList = resp.responseData;
                        this.getScrollBar();
                    }
                });
            },
            //4.获取大事记分类列表
            getEventPlane(eventType, eventDate) {
                if (Tool.isEmpty(eventType) || Tool.isEmpty(eventDate)) {
                    let eventIndex = "2019-" + this.e19[0].date[0];
                    eventType = MATERIAL_EVENT_TYPE.EVENT_2019.key;
                    eventDate = eventIndex;
                }
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/module/material/event/' + eventType + '/' + eventDate).then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        if(eventType.indexOf("19")!==-1){
                            this.eventDates=SessionStorage.get(E2019);
                        }else if(eventType.indexOf("20")!==-1){
                            this.eventDates=this.e20;
                        }else if(eventType.indexOf("21")!==-1){
                            this.eventDates=this.e21;
                        }
                        this.materialEventList = resp.responseData;
                        let pics=[];
                        for(let i=0;i<this.materialEventList[0].miniPicList.length;i++){
                            pics.push(this.materialEventList[0].miniPicList[i]);
                        }
                        this.eventPics=pics;
                        this.eventsName=this.materialEventList[0].name;
                    }
                });
            },
            //5.获取最新素材列表
            getNewMaterial(item) {
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/module/material/new/' + item).then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.materialNewList = resp.responseData;
                    }
                });
            },
            //6.获取热门素材列表
            getHotMaterial() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/material/hot').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.materialHotList = resp.responseData;
                    }
                });
            },
            openVideo(item) {
                this.$nextTick(() => {
                    let url = item.video;
                    let title = item.name;
                    let coverPic = item.videoCover;
                    this.$refs.ossDialogPlayer.playerURL(url, title, coverPic);
                });
            },
            downVideo(uniId,url) {
                let token=Tool.getEmpLogin().token;
                let suffix=url.substring(url.lastIndexOf(".")+1,url.length).toLowerCase();
                axios({
                    method:'post',
                    //url:item.video,
                    url:process.env.VUE_APP_SERVER+'/business/client/module/material/download/'+uniId+"/"+suffix,
                    responseType:'blob',
                    headers:{
                        token:token,
                    }
                }).then((response)=>{

                    let blob=new Blob();
                    if (suffix==="ppt" || suffix==="pptx" ){
                        blob=new Blob([response.data],{type:'application/vnd.ms-powerpoint'});
                    }else if(suffix==="mp4"){
                        blob=new Blob([response.data],{type:'video/mpeg4'});
                    }else if(suffix==="zip"){
                        blob=new Blob([response.data],{type:'application/x-zip-compressed'});
                    }

                    let responseContentName=response.headers["content-disposition"].split(";")[1].split("filename=")[1];
                    let fileName=decodeURIComponent(responseContentName);
                    let link=document.createElement("a");
                    link.style.display="none";
                    link.href=URL.createObjectURL(blob);
                    link.setAttribute('download',fileName);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }).catch(error => {
                    console.log(error)
                });
            },
            getEventDate() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/material/event/date').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.eventDate = resp.responseData;
                        for (let i = 0; i < this.eventDate.E19.length; i++) {
                            this.e19.push(this.eventDate.E19[i]);
                        }
                        this.eventDates=this.e19;
                        SessionStorage.set(E2019,this.e19);
                        for (let i = 0; i < this.eventDate.E20.length; i++) {
                            this.e20.push(this.eventDate.E20[i]);
                        }
                        for (let i = 0; i < this.eventDate.E21.length; i++) {
                            this.e21.push(this.eventDate.E21[i]);
                        }
                        this.getEventPlane();
                    }
                });
            },
            inEvent(item){
              let eventYear=document.getElementsByClassName("eventYear");
              for(let i=0;i<eventYear.length;i++){
                if(eventYear[i].className.indexOf("active")!==-1){
                    if(eventYear[i].innerText.indexOf("2019")!==-1){
                        let eventDate="2019-"+item;
                        this.getEventPlane(MATERIAL_EVENT_TYPE.EVENT_2019.key,eventDate);
                    } else if(eventYear[i].innerText.indexOf("2020")!==-1){
                        let eventDate="2020-"+item;
                        this.getEventPlane(MATERIAL_EVENT_TYPE.EVENT_2020.key,eventDate);
                    } else if(eventYear[i].innerText.indexOf("2021")!==-1){
                        let eventDate="2021-"+item;
                        this.getEventPlane(MATERIAL_EVENT_TYPE.EVENT_2021.key,eventDate);
                    }
                }

              }

            },
        }
    }
</script>

<style scoped>
    .m_carousel {

    }

    .m_carousel #carousel-example-generic {
        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
    }

    .m_carousel #carousel-example-generic .carousel-inner .item .mobile_img {
        cursor: pointer;
        display: block;
        width: 100%;

    }

    .m_carousel #carousel-example-generic .carousel-inner .item .pc_img {
        display: block;
        width: 100%;
        height: 410px;
        background-position: center; /*居中显示*/
        background-size: cover; /*避免图片尺寸不一样，进行填充屏幕*/
    }

    /*最新视频*/
    .m_new {
        padding: 20px 10px 0;
        background-color: #f5f7fa;
        clear: both; /*clear取消默认继承上一级标签属性*/
    }

    /*移动端滚动*/
    .m_new .nav_parent {
        width: 100%;
        overflow: hidden;
    }

    .m_new .nav-tabs .tab-tag {
        cursor: pointer;
    }

    .m_new .nav-tabs .tab-tag span {
        line-height: 50px;
        font-size: 24px;
        margin-right: 10px;
        color: #e92322;
    }

    .m_new .nav-tabs .tab-tag a {
        font-size: 20px;
        font-weight: bolder;
        color: black;
        position: relative;
    }

    /*.m_new .nav-tabs .tab-tag a::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        background: rgba(159,2,1,.5);
    }*/
    .m_new .nav-tabs .tab-tag.active a, .m_new .nav-tabs .tab-tag:hover a {
        border-bottom: 0;
        background: transparent;
    }

    .m_new .nav-tabs li {
        list-style: none;
        border-bottom: 0;
        padding: 0 20px;

    }

    .m_new .nav-tabs li a {
        line-height: 50px;
        border: none;
        border-radius: 0;
        background-color: transparent;
        font-size: 16px;
    }

    .m_new .nav-tabs li:hover a {
        color: #e92322;
    }

    .m_new .nav-tabs li.active a,
    .m_new .nav-tabs li.active a {
        border: none;
        border-radius: 0;
        background-color: transparent;
        border-bottom: 3px solid #e92322;
        color: black;
        font-weight: bolder;
    }

    /*最新卡片*/
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    /*card内容*/
    .tab-content {
        margin: 20px auto;
    }

    .tab-pane .pane-col .pane-box {
        border-radius: 10px;
        max-width: 270px;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
    }

    .tab-pane .pane-col .pane-box .videoImg {
        max-height: 150px;
        overflow: hidden;
    }

    .tab-pane .pane-col .pane-box:hover img,
    .tab-pane .pane-col .pane-box:focus img {
        transform: scale(1.1);
        /*margin-top: -3px;
        display: inline-block;*/
    }

    .tab-pane .pane-col .pane-box img {
        transition: 500ms;
    }

    .tab-pane .pane-col .pane-box div .title {
        font-size: 16px;
        line-height: 20px;
        color: #545C63;
    }

    .tab-pane .pane-col .pane-box div .desc {
        font-size: 14px;
        line-height: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #a8a2a2;
    }

    .tab-pane .pane-col .pane-box div .showVideo {
        margin-top: 15px;
        float: left;
        padding: 10px 15px;
        background: #2797cb;
        border: 0;
    }

    .tab-pane .pane-col .pane-box div .showVideo:hover,
    .tab-pane .pane-col .pane-box div .showVideo:focus {
        background: #2db2ef;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    }

    .tab-pane .pane-col .pane-box div .showVideo span {
        margin-right: 5px;
    }

    .tab-pane .pane-col .pane-box div .downVideo {
        margin-top: 15px;
        float: right;
        padding: 10px 15px;
        background: #e95022;
        border: 0;
    }

    .tab-pane .pane-col .pane-box div .downVideo:hover,
    .tab-pane .pane-col .pane-box div .downVideo:focus {
        background: #f86337;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    }

    .tab-pane .pane-col .pane-box div .downVideo span {
        margin-right: 5px;
    }

    .tab-pane .pane-col .pane-box div {
        text-align: center;
    }

    .tab-pane .pane-col .pane-box div .downPlane {
        padding: 10px 50px;
        margin-top: 15px;
        background: #e95022;
        border: 0;
    }

    .tab-pane .pane-col .pane-box div .downPlane:hover,
    .tab-pane .pane-col .pane-box div .downPlane:focus {
        background: #f86337;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    }

    .tab-pane .pane-col .pane-box div .downPlane span {
        margin-right: 10px;
    }

    /*热门视频*/
    .m_hort {
        padding: 20px 10px 0;
        clear: both;
    }

    .m_hort .nav-tabs {

        padding: 0 20px;
        border-bottom: 0;
        cursor: pointer;
    }

    .m_hort .nav-tabs .tab-tag.active a, .m_hort .nav-tabs .tab-tag:hover a {
        border-bottom: 0;
        background: transparent;
    }

    .m_hort .nav-tabs li.active a,
    .m_hort .nav-tabs li:hover a {
        border: none;
        border-radius: 0;
        background: transparent;
        color: black;
        font-weight: bolder;
        border-bottom: 0;
    }

    .m_hort .nav-tabs .tab-tag:first-of-type {
        float: left;
    }

    .m_hort .nav-tabs .tab-tag:last-of-type {
        float: right;
    }

    .m_hort .nav-tabs .tab-tag .leftMoreS {
        float: left;
        line-height: 25px;
        font-size: 20px;
        margin-right: 10px;
        color: #e92322;
    }

    .m_hort .nav-tabs .tab-tag .leftMoreA {
        font-size: 20px;
        font-weight: bolder;
        color: black;
        position: relative;
    }

    .m_hort .nav-tabs .tab-tag .rightMoreS {
        float: right;
        line-height: 25px;
        font-size: 20px;
        margin-left: 10px;
        color: #e92322;
    }

    .m_hort .nav-tabs .tab-tag .rightMoreA {
        font-size: 20px;
        font-weight: bolder;
        color: black;
        position: relative;
    }

    /*热门列表*/
    .m_hort .tab-pane {
        margin: 20px 10px 0;
        height: 100%;
    }

    /*视频分类*/
    .m_type {
        padding: 10px 10px 0;
    }

    .m_type .nav_parent {
        width: 100%;
        overflow: hidden;
    }

    .m_type .nav-tabs .tab-tag {
        display: inline-block;
        cursor: pointer;
    }

    .m_type .nav-tabs .tab-tag span {
        float: left;
        line-height: 50px;
        font-size: 24px;
        margin-right: 10px;
        color: #e92322;
    }

    .m_type .nav-tabs .tab-tag a {
        font-size: 20px;
        font-weight: bolder;
        color: black;
        position: relative;
    }

    /*.m_type .nav-tabs .tab-tag a::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        background: rgba(159,2,1,.5);
    }*/
    .m_type .nav-tabs .tab-tag.active a, .m_type .nav-tabs .tab-tag:hover a {
        border-bottom: 0;
        background: transparent;
    }

    .m_type .nav-tabs li {
        list-style: none;
        border-bottom: 0;
        padding: 0 10px;

    }

    .m_type .nav-tabs li a {
        clear: both;
        line-height: 50px;
        border: none;
        border-radius: 0;
        background-color: transparent;
        font-size: 16px;
    }

    .m_type .nav-tabs li:hover a {
        color: #e92322;
    }

    .m_type .nav-tabs li.active a,
    .m_type .nav-tabs li.active a {
        border: none;
        border-radius: 0;
        background-color: transparent;
        border-bottom: 3px solid #e92322;
        color: black;
        font-weight: bolder;
    }

    /*平面素材*/
    .m_plane {
        padding: 0 10px 0;
        width: 100%;
    }

    .m_plane .nav_parent {
        width: 100%;
        overflow: hidden;
    }

    .m_plane .planeBG {
        background: #eeeeee;
        width: 100%;
        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
    }

    .m_plane .planeBGC {
        width: 100%;
        background-color: #f5f7fa;
    }

    .m_plane .nav-tabs {

    }

    .m_plane .nav-tabs .tab-tag {

        display: inline-block;
        cursor: pointer;
    }

    .m_plane .nav-tabs .tab-tag span {
        float: left;
        line-height: 50px;
        font-size: 24px;
        margin-right: 10px;
        color: #e92322;
    }

    .m_plane .nav-tabs .tab-tag a {
        font-size: 20px;
        font-weight: bolder;
        color: black;
        position: relative;
    }

    /*.m_plane .nav-tabs .tab-tag a::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        background: rgba(159,2,1,.5);
    }*/
    .m_plane .nav-tabs .tab-tag.active a, .m_plane .nav-tabs .tab-tag:hover a {
        border-bottom: 0;
        background: transparent;
    }

    .m_plane .nav-tabs li {
        list-style: none;
        border-bottom: 0;
        padding: 0 20px;

    }

    .m_plane .nav-tabs li a {
        clear: both;
        line-height: 50px;
        border: none;
        border-radius: 0;
        background-color: transparent;
        font-size: 16px;
    }

    .m_plane .nav-tabs li:hover a {
        color: #e92322;
    }

    .m_plane .nav-tabs li.active a,
    .m_plane .nav-tabs li.active a {
        border: none;
        border-radius: 0;
        background-color: transparent;
        border-bottom: 3px solid #e92322;
        color: black;
        font-weight: bolder;
    }

    /*公司大事记*/
    .m_pics {
        padding: 0 10px 0;
    }

    .m_pics .nav_parent {
        width: 100%;
        overflow: hidden;
    }

    .m_pics .pics_BG {
        background: #eeeeee;
        width: 100%;
        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
    }

    .m_pics .nav-tabs .tab-tag {
        display: inline-block;
        cursor: pointer;
    }

    .m_pics .nav-tabs .tab-tag span {
        float: left;
        line-height: 50px;
        font-size: 24px;
        margin-right: 10px;
        color: #e92322;
    }

    .m_pics .nav-tabs .tab-tag a {
        font-size: 20px;
        font-weight: bolder;
        color: black;
        position: relative;
    }

    /*.m_pics .nav-tabs .tab-tag a::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        background: rgba(159,2,1,.5);
    }*/
    .m_pics .nav-tabs .tab-tag.active a, .m_pics .nav-tabs .tab-tag:hover a {
        border-bottom: 0;
        background: transparent;
    }

    .m_pics .nav-tabs li {
        list-style: none;
        border-bottom: 0;
        padding: 0 20px;

    }

    .m_pics .nav-tabs li a {
        clear: both;
        line-height: 50px;
        border: none;
        border-radius: 0;
        background-color: transparent;
        font-size: 16px;
    }

    .m_pics .nav-tabs li:hover a {
        color: #e92322;
    }

    .m_pics .nav-tabs li.active a,
    .m_pics .nav-tabs li.active a {
        border: none;
        border-radius: 0;
        background-color: transparent;
        border-bottom: 3px solid #e92322;
        color: black;
        font-weight: bolder;
    }

    /*滚动条*/

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        /*这里设置了导航的最低高度*/
        /*min-height: 500px;*/
    }

    .el-submenu .el-menu-item {
        min-width: 140px;
        padding: 0;
    }

    .m_pics .tab-content .tab-pane .pics_list {
        max-height: 400px;
        overflow: hidden; /*超出部分，滚动条滑动可见*/
        position: relative;
        /* 不让文字被选中 */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .m_pics .tab-content .tab-pane .pics_list .leftContent {
        height: 100%;
    }

    .m_pics .tab-content .tab-pane .pics_list .leftContent .menuUL {
        border-right: 0;
        background: transparent;
    }

    .m_pics .tab-content .tab-pane .pics_list .leftScroll {
        background: #eeeeee;
        width: 15px;
        height: 400px;
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 16%;
    }

    .m_pics .tab-content .tab-pane .pics_list .leftScroll .leftScrollBar {
        background: #cccccc;
        width: 100%;

        position: absolute;
        top: 0;
        left: 0;
        border-radius: 10px;
        cursor: pointer;
    }

    .m_pics .tab-content .tab-pane .pics_list .rightContent {
        position: relative;
        left: 70px;
    }

    .m_pics .tab-content .tab-pane .pics_list .rightContent .contentDiv {

        float: left;
        margin-right: 10px;
        border: 1px solid #cccccc;
        overflow: hidden;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .m_pics .tab-content .tab-pane .pics_list .rightContent .contentDiv .el-image {
        transition: 1s;
        max-width: 150px;
        max-height: 100%;
        padding: 5px;
    }

    .m_pics .tab-content .tab-pane .pics_list .rightContent .contentDiv:hover .el-image,
    .m_pics .tab-content .tab-pane .pics_list .rightContent .contentDiv:focus .el-image {
        transform: scale(1.3);
    }
    /*大事件样式*/
    .eventDesc{
        width: 90%;
        display: inline-block;
        text-align: center;
        margin-top: 10px;
        background: #e92322;
        font-size: 20px;
        color: #ffffff;
        margin-bottom: 10px;
        border-radius: 20px;
    }
    .eventDesc span{
        display: inline-block;
        padding: 5px;
    }
    /*ppt按钮更新*/
    .tab-pane .pane-col .pane-box div .downPPT {
        margin-top: 15px;
        text-align: center;
        padding: 10px 50px;
        background: #e95022;
        border: 0;
    }
</style>